import CustomInput from '@/components/antd-comp/input/CustomInput'
import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { Button, Select } from 'antd'
import { checkArrayNoRequiredItems, checkFieldDuplicates } from '../utils'
import './index.less'
import { debug } from 'console'

/* 
import { CommonSmallAdddButton, CommonSmallSvg,CommmonSmallJudgmentCommon,CommonSmallErrorTitle } from '@/pages/workflow/components/CommonSmallTemp'

<CommonSmallSvg delOption={delOption} i={i}></CommonSmallSvg>
<CommonSmallAdddButton addOption={addOption}></CommonSmallAdddButton>
//类型引用组建
<CommmonSmallJudgmentCommon
 item={item}
 optionList={optionList}
 options={options}
 i={i}
 Change={newList => {
   setOptionList(newList)
   editData({
     inputList: newList
   })
 }}
></CommmonSmallJudgmentCommon>
// 提示信息
<CommonSmallErrorTitle
optionList={optionList}
noneList={['value', 'variable', 'type']}
repeat={'variable'}
></CommonSmallErrorTitle>
*/

/* 通用小组建 */

/**
 * 删除SVG配置对象。
 *
 * @typedef {Object} DeleteSvgConfig
 * @property {Function} delOption - 删除方法函数，用于执行删除操作。
 * @property {number} i - 要删除项的索引位置。
 */
const CommonSmallSvg = ({ delOption, i }: any) => {
  return (
    <svg
      className="CommonSmall_end_delSvg cursonCase"
      xmlns="http://www.w3.org/2000/svg"
      width="14"
      height="14"
      fill="none"
      viewBox="0 0 24 24"
      onClick={() => delOption(i)}
    >
      <path
        fill="currentColor"
        d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 2C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
      ></path>
    </svg>
  )
}

/**
 * 新增按钮配置对象。
 *
 * @property {Function} addOption - 新增方法函数，用于执行新增操作。
 * @property {string} [title='新增'] - 按钮显示的名称，默认为“新增”。
 */
const CommonSmallAdddButton = ({ addOption, title = '新增', ...props }) => {
  return (
    <Button color="default" className="CommonSmall_add_button" onClick={addOption} {...props}>
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M12 2a1 1 0 0 0-1 1v8H3a1 1 0 1 0 0 2h8v8a1 1 0 1 0 2 0v-8h8a1 1 0 1 0 0-2h-8V3a1 1 0 0 0-1-1Z"
        />
      </svg>
      <span className="InputCont_button_title">{title}</span>
    </Button>
  )
}

/**
 * Select Input 判断配置对象，用于定义选择输入项的行为。
 *
 * @property {Array<Object>} item - 数据源数组，包含所有可选项的数据。每个对象应包含一个 `type` 属性，用于判断是“引入”还是“输入”。
 * @property {Array<Object>} optionList - list
 * @property {Array<Object>} options - select 组件的具体选项，通常与 `optionList` 相关联，但可以包含额外的显示或行为配置。
 * @property {number} i - 当前数据的索引位置，用于标识当前处理的项目。
 * @property {Function} Change - 更改方法函数，当选择或输入发生更改时调用。此函数应接受当前索引和其他相关参数作为输入。
 */
const CommmonSmallJudgmentCommon = ({ item, optionList, options, i, Change, className='', field = ''}) => {
  // 检查值是否在选项列表中，为空时忽略检查
  const isValueInOptions = !item.value || options.some(group => 
    group.options?.some(opt => opt.value === (field === 'variable' ? item.variable : item.value))
  );

  return (
    <div className={`relative inline-block ${className ? className: 'w-[60%]'}`}>
      {item.type === 'cite' && !isValueInOptions && (
        <div className="absolute inset-0 z-10 flex items-center  ml-1 pointer-events-none">
          <div className="bg-[#FFF2F0] text-[#FF4D4F] text-xs px-2 py-1 rounded"  style={{ width: 'calc(100% - 25px)' }}>
            选项不合法
          </div>
        </div>
      )} 
      {item.type === 'cite' ? (
        <Select
          value={ field === 'variable' ? item.variable : item.value}
          defaultValue={field === 'variable' ? item.variable : item.value}
          placeholder="请选择"
          placement="bottomLeft"
          style={{ pointerEvents: 'auto' }}
          className={ className ? className : "w-[100%]"}
          onChange={e => {
            const selectedOption = options.reduce((found, group) => {
              const option = group.options?.find(opt => opt.value === e);
              return option || found;
            }, null);
            const newList = optionList.map((obj, index) => {
              if (index === i && e) {
                if(field === 'variable'){
                  return {
                    ...obj,
                    variable: e,
                    sourceType: selectedOption?.sourceType
                  }
                }else{
                  return { 
                    ...obj, value: e, 
                    valuet: e, 
                    value_selector: e.split(','),
                    sourceType: selectedOption?.sourceType 
                  }
                }
              }
              return obj
            })
            Change(newList)
          }}
          options={options}
        ></Select>
      ) : (
        <CustomInput
          placeholder="输入参数值"
          onChange={e => {
            const newList = optionList.map((obj, index) => {
              if (index === i) {
                return { ...obj, value: e.target.value, valuet: e.target.value }
              }
              return obj
            })
            Change(newList)
          }}
          maxLength={INPUT_CONSTRAINTS.DESCRIPTION_MAX_LENGTH}
          value={item.value}
          className="w-[100%]"
        />
      )}
    </div>
  )
}

/**
 * 提示信息配置对象，用于控制提示信息的行为。
 *
 * @property {Array<any>} optionList - 检索数组，包含所有可用选项的数据。
 * @property {Array<any>} noneList - 用于判断是否为空的列表。如果此列表为空，则触发特定的提示逻辑。
 * @property {boolean} [repeat=false] - 判空数据标志，默认为 ''。不为空检查重复字段
 * @property {string} [repeatName='无数据'] - 重复数据提示文案，默认为“参数名不能重复”。
 */
const CommonSmallErrorTitle = ({ optionList, noneList, repeat = '', repeatName = '参数名不能重复' }) => {
  const hasEmptyItems = !checkArrayNoRequiredItems(optionList, noneList)

  if (hasEmptyItems) {
    return <div className="custom-params-invalid">参数值不可为空</div>
  }

  if (repeat) {
    return <>{!checkFieldDuplicates(optionList, repeat) && <div className="custom-params-invalid">{repeatName}</div>}</>
  }
  return null
}

export { CommmonSmallJudgmentCommon, CommonSmallAdddButton, CommonSmallErrorTitle, CommonSmallSvg }
